<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :title="status === 'add' ? '新增礼物' : '编辑礼物'"
      :visible.sync="dialogVisible"
      width="850px"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          label-width="100px"
        >
          <el-form-item label="选择类别" prop="category_id">
            <el-select v-model="ruleForm.category_id" placeholder="请选择类别">
              <el-option
                v-for="item in categoryOption"
                :key="'类别' + item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="礼物名称" prop="product_name">
            <el-input
              v-model="ruleForm.product_name"
              placeholder="请输入礼物名称"
              style="width: 80%;"
            ></el-input>
          </el-form-item>

          <el-form-item label="展示图片" prop="picture">
            <el-upload

              :http-request="customizeUpload"
              :on-success="handleSuccess"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img
                v-if="ruleForm.picture"
                :src="ruleForm.picture"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="效果">
            <div v-if="cateArr.includes(ruleForm.category_id)">
              <div class="pictures">
                <p class="font-bold">动态效果图</p>
                <ul class="flex items-center flex-wrap">
                  <li class="w-1/2 flex flex-col ">
                    <p>左上</p>
                    <el-upload

                      :http-request="customizeUpload"
                      :on-success="handleSuccessLeftTop"
                      :show-file-list="false"
                      action=""
                      class="avatar-uploader"
                    >
                      <img
                        v-if="extraForm.leftTopImage"
                        :src="extraForm.leftTopImage"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-button
                      v-if="extraForm.leftTopImage"
                      class="w-24"
                      type="danger"
                      @click="handleRemove(1)"
                    >删除
                    </el-button
                    >
                  </li>
                  <li class="w-1/2 flex flex-col ">
                    <p>右上</p>
                    <el-upload

                      :http-request="customizeUpload"
                      :on-success="handleSuccessRightTop"
                      :show-file-list="false"
                      action=""
                      class="avatar-uploader"
                    >
                      <img
                        v-if="extraForm.rightTopImage"
                        :src="extraForm.rightTopImage"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-button
                      v-if="extraForm.rightTopImage"
                      class="w-24"
                      type="danger"
                      @click="handleRemove(2)"
                    >删除
                    </el-button
                    >
                  </li>
                  <li class="w-1/2 flex flex-col ">
                    <p>左下</p>
                    <el-upload

                      :http-request="customizeUpload"
                      :on-success="handleSuccessLeftBottom"
                      :show-file-list="false"
                      action=""
                      class="avatar-uploader"
                    >
                      <img
                        v-if="extraForm.leftBottomImage"
                        :src="extraForm.leftBottomImage"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-button
                      v-if="extraForm.leftBottomImage"
                      class="w-24"
                      type="danger"
                      @click="handleRemove(3)"
                    >删除
                    </el-button
                    >
                  </li>
                  <li class="w-1/2 flex flex-col ">
                    <p>右下</p>
                    <el-upload

                      :http-request="customizeUpload"
                      :on-success="handleSuccessRightBottom"
                      :show-file-list="false"
                      action=""
                      class="avatar-uploader"
                    >
                      <img
                        v-if="extraForm.rightBottomImage"
                        :src="extraForm.rightBottomImage"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-button
                      v-if="extraForm.rightBottomImage"
                      class="w-24"
                      type="danger"
                      @click="handleRemove(4)"
                    >删除
                    </el-button
                    >
                  </li>
                </ul>
              </div>
              <div class="borders">
                <p class="font-bold">边框</p>
                <div class="flex items-center">
                  <p class="mr-5 mb-3">是否显示</p>
                  <el-radio-group v-model="extraForm.isShowBorder">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </div>
                <div v-if="extraForm.isShowBorder">
                  <div class="flex items-center  mb-3">
                    <p class="mr-5">宽&emsp;&emsp;度</p>
                    <el-input
                      v-model="extraForm.chatBubbleBorder.width"
                      class="lu-input"
                      placeholder="请输入边框宽度(1-20)"
                    ></el-input>
                  </div>
                  <div class="flex items-center  mb-3">
                    <p class="mr-5">圆角度数</p>
                    <el-input
                      v-model="extraForm.chatBubbleBorder.rounded"
                      class="lu-input"
                      placeholder="请输入圆角度数"
                    ></el-input>
                  </div>
                  <div class="flex items-center  mb-3">
                    <p class="mr-5">渐变角度</p>
                    <el-radio-group
                      v-model="extraForm.chatBubbleBorder.direction"
                    >
                      <el-radio :label="0">垂直</el-radio>
                      <el-radio :label="1">水平</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="flex">
                    <p class="mr-5">色&emsp;&emsp;值</p>
                    <div>
                      <div
                        v-for="(item, index) in borderColors"
                        :key="'边框色值' + index"
                        class="mb-3"
                      >
                        <el-input
                          v-model="item.color"
                          class="lu-input"
                          placeholder="请输入色值"
                        ></el-input>
                        <el-button
                          v-if="index !== 0"
                          type=""
                          @click="handleRemoveBorderColor(index)"
                        >
                          删除
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div class="flex items-center  mb-3">
                    <p class="mr-5">&emsp;&emsp;&emsp;&emsp;</p>
                    <el-button type="primary" @click="handleAddBorderColor">
                      添加色值
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="contents">
                <p class="font-bold">内容框</p>
                <div class="flex items-center  mb-3">
                  <p class="mr-5">字体大小</p>
                  <el-input
                    v-model="extraForm.chatBubbleText.textFont"
                    class="lu-input"
                    placeholder="请输入字体大小"
                  ></el-input>
                </div>
                <div class="flex items-center  mb-3">
                  <p class="mr-5">圆角度数</p>
                  <el-input
                    v-model="extraForm.chatBubbleText.rounded"
                    class="lu-input"
                    placeholder="请输入圆角度数"
                  ></el-input>
                </div>
                <div class="flex items-center  mb-3">
                  <p class="mr-5">渐变角度</p>
                  <el-radio-group v-model="extraForm.chatBubbleText.direction">
                    <el-radio :label="0">垂直</el-radio>
                    <el-radio :label="1">水平</el-radio>
                  </el-radio-group>
                </div>
                <div class="flex">
                  <p class="mr-5">色&emsp;&emsp;值</p>
                  <div>
                    <div
                      v-for="(item, index) in contentColors"
                      :key="'内容色值' + index"
                      class="mb-3"
                    >
                      <el-input
                        v-model="item.color"
                        class="lu-input"
                        placeholder="请输入色值"
                      ></el-input>
                      <el-button
                        v-if="index !== 0"
                        type=""
                        @click="handleRemoveContentColors(index)"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="flex items-center  mb-3">
                  <p class="mr-5">&emsp;&emsp;&emsp;&emsp;</p>
                  <el-button type="primary" @click="handleAddContentColors">
                    添加色值
                  </el-button>
                </div>
              </div>
            </div>
            <div v-else-if="radioArr.includes(ruleForm.category_id)">
              <div class="pictures">
                <p>图标</p>
                <el-upload

                  :http-request="customizeUpload"
                  :on-success="handleSuccessRadio"
                  :show-file-list="false"
                  action=""
                  class="avatar-uploader"
                >
                  <img
                    v-if="radioForm.url"
                    :src="radioForm.url"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <div class="offsets flex items-center">
                <p class="mr-5">偏&emsp;&emsp;移</p>
                <el-input
                  v-model="radioForm.offsetCenterY"
                  class="lu-input"
                  placeholder="请输入偏移值"
                ></el-input>
              </div>
            </div>
            <div v-else-if="approachArr.includes(ruleForm.category_id)">
              <div class="flex items-center  mb-3">
                <p class="mr-5">色&emsp;&emsp;值</p>
                <el-input
                  v-model="approachForm.color"
                  class="lu-input"
                  placeholder="请输入色值"
                ></el-input>
              </div>
              <div class="flex items-center  mb-3">
                <p class="mr-5">偏&emsp;&emsp;移</p>
                <el-input
                  v-model="approachForm.offsetCenterY"
                  class="lu-input"
                  placeholder="请输入偏移值"
                ></el-input>
              </div>
              <div class="flex items-center  mb-3">
                <p class="mr-5">链&emsp;&emsp;接</p>
                <div>
                  <el-upload

                    :http-request="customizeUpload"
                    :on-success="handleSuccessApproachUrl"
                    :show-file-list="false"
                    action=""
                    class="avatar-uploader"
                  >
                    <img
                      v-if="approachForm.url"
                      :src="approachForm.url"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-button
                    v-if="approachForm.url"
                    class="w-24"
                    type="danger"
                    @click="handleRemove(5)"
                  >删除
                  </el-button
                  >
                </div>
              </div>
            </div>
            <div v-else-if="nicknameArr.includes(ruleForm.category_id)">
              <div class="flex items-center  mb-3">
                <p class="mr-5">扫光色值</p>
                <el-input
                  v-model="nicknameForm.shimmerColor"
                  class="lu-input"
                  placeholder="请输入扫光色值"
                ></el-input>
              </div>
              <div class="flex">
                <p class="mr-5">色&emsp;&emsp;值</p>
                <div>
                  <div
                    v-for="(item, index) in nicknameColors"
                    :key="'昵称色值' + index"
                    class="mb-3"
                  >
                    <el-input
                      v-model="item.color"
                      class="lu-input"
                      placeholder="请输入色值"
                    ></el-input>
                    <el-button
                      v-if="index !== 0"
                      type=""
                      @click="handleRemoveNicknameColors(index)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="flex items-center  mb-3">
                <p class="mr-5">&emsp;&emsp;&emsp;&emsp;</p>
                <el-button type="primary" @click="handleAddNicknameColors">
                  添加色值
                </el-button>
              </div>
            </div>
            <div v-else-if="ruleForm.category_id === 2">
              <el-upload

                :http-request="customizeUpload"
                :on-success="handleSuccess1"
                :show-file-list="false"
                action=""
                class="avatar-uploader"
              >
                <video
                  v-if="ruleForm.special"
                  :src="ruleForm.special"
                  autoplay
                  class="avatar"
                  loop
                  muted
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div v-else>
              <el-upload

                :http-request="customizeUpload"
                :on-success="handleSuccess1"
                :show-file-list="false"
                action=""
                class="avatar-uploader"
              >
                <img
                  v-if="ruleForm.special"
                  :src="ruleForm.special"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>

          <el-form-item label="天数&价格">
            <div
              v-for="(item, index) in days_price_arr"
              :key="'天价' + index"
              :class="[index ? 'mt-2' : '']"
            >
              <el-input v-model="item.day" class="mr-3" style="width:200px">
                <span slot="suffix">天</span>
              </el-input>
              <el-input v-model="item.price" class="mr-3" style="width:200px">
                <span slot="suffix">金币</span>
              </el-input>
              <el-input
                v-model="item.intimacy"
                class="mr-3"
                style="width:200px"
              >
                <span slot="suffix">亲密度</span>
              </el-input>
              <!-- <el-button v-if="index" @click.prevent="removePrice(item)"
                >删除</el-button
              > -->
            </div>
          </el-form-item>
          <!-- <el-form-item>
            <el-button @click="addPrice">新增</el-button>
          </el-form-item> -->

          <el-form-item
            v-if="ruleForm.category_id === 2"
            label="展示位置"
            prop="show_type"
          >
            <el-radio-group
              v-model="ruleForm.show_type"
              @change="handleTestChange"
            >
              <el-radio :label="1">半屏</el-radio>
              <el-radio :label="2">全屏</el-radio>
              <el-radio :label="3">右侧</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.category_id === 4"
            label="展示位置"
            prop="show_type"
          >
            <el-radio-group v-model="ruleForm.show_type">
              <el-radio :label="1">旧版</el-radio>
              <el-radio :label="2">新版</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="出售状态" prop="sale_status">
            <el-radio-group v-model="ruleForm.sale_status">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          :loading="submitLoading"
          type="primary"
          @click="submitForm('ruleForm')"
        >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cupidAdd, cupidEdit } from '@/api/IntimateHome/IntimateHome'

export default {
  name: 'addEditModal',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 模态框的状态 Add 为新增  Edit为编辑
    status: {
      type: String,
      default: ['add']
    },
    // 选择类别选择项
    categoryOption: {
      type: Array,
      default: () => []
    },
    // 风格标签选择项
    styleLabelOptions: {
      type: Array,
      default: () => []
    },
    id: {
      type: Number,
      default: 0
    },
    row: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      dataTime: {
        startTime: null,
        endTime: null
      },
      submitLoading: false,
      ruleForm: {
        category_id: null, // 分类id
        product_name: null, // 礼物名称
        picture: null, // 图片url
        special: null, // 动效url
        price_info: null, // 天数与价格
        show_type: 1,
        sale_status: 1, // 出售状态：1：上架；0：下架，必须
        checkedCities: []
      },
      days_price_arr: [
        { price: undefined, day: undefined, intimacy: undefined }
      ],
      cateArr: [24, 23],
      radioArr: [26],
      approachArr: [4],
      nicknameArr: [33],
      inputArr: [4, 33, 26],

      rules: {
        category_id: [
          { required: true, message: '请选择类别', trigger: 'blur' }
        ],
        product_name: [
          { required: true, message: '请输入礼物名称', trigger: 'blur' }
        ],
        product_desc: [
          { required: true, message: '请输入礼物介绍', trigger: 'blur' }
        ],
        picture: [
          { required: true, message: '请上传展示图片', trigger: 'blur' }
        ],
        // special: [
        //   { required: true, message: "请上传/输入效果", trigger: "blur" }
        // ],
        show_type: [
          { required: true, message: '请输入选择展示位置', trigger: 'blur' }
        ],
        /*style_ids: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],*/
        sale_status: [
          { required: true, message: '请选择出售状态', trigger: 'blur' }
        ],
        checkedCities: [
          { required: true, message: '请选择展示风格', trigger: 'blur' }
        ]
      },
      // 公屏回声 聊天回声
      extraForm: {
        leftTopImage: '',
        rightTopImage: '',
        leftBottomImage: '',
        rightBottomImage: '',
        isShowBorder: 1,
        chatBubbleBorder: {
          width: '',
          rounded: '',
          direction: 1,
          gradientColor: []
        },
        chatBubbleText: {
          textFont: '',
          rounded: '',
          direction: 1,
          gradientColor: []
        }
      },
      borderColors: [{ color: '' }],
      contentColors: [{ color: '' }],

      // 全服广播
      radioForm: {
        url: '',
        offsetCenterY: ''
      },

      // 入场特效
      approachForm: {
        color: '',
        offsetCenterY: '',
        url: ''
      },

      // 昵称特效
      nicknameForm: {
        shimmerColor: '',
        colors: []
      },
      nicknameColors: [{ color: '' }]
    }
  },
  methods: {
    handleTestChange(value) {

    },

    handleClose(done) {
      this.$emit('update:dialogVisible', false)
      this.$emit('update:status', 'add')
      this.resetForm('ruleForm')
    },
    submitForm(formName) {
      let data = {}
      for (let key in this.ruleForm) {
        if (key !== 'checkedCities') {
          data[key] = this.ruleForm[key]
        }
      }
      if (this.ruleForm.checkedCities) {
        data['style_ids'] = this.ruleForm.checkedCities.join(',')
      }
      // let day_price = [];
      // this.days_price_arr.forEach(item => {
      //   day_price.push(`${item.day}:${item.price}`);
      // });
      data.price_info = JSON.stringify(this.days_price_arr[0])

      if (this.cateArr.includes(this.ruleForm.category_id)) {
        this.extraForm.chatBubbleBorder.gradientColor = this.borderColors
        this.extraForm.chatBubbleText.gradientColor = this.contentColors
        data.special = JSON.stringify(this.extraForm)
      } else if (this.radioArr.includes(this.ruleForm.category_id)) {
        data.special = JSON.stringify(this.radioForm)
      } else if (this.approachArr.includes(this.ruleForm.category_id)) {
        data.special = JSON.stringify(this.approachForm)
      } else if (this.nicknameArr.includes(this.ruleForm.category_id)) {
        this.nicknameForm.colors = this.nicknameColors
        data.special = JSON.stringify(this.nicknameForm)
      }

      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.submitLoading = true
          let detail
          // 新增活动礼物
          if (this.status === 'add') {
            detail = await cupidAdd(data)
          } else {
            // 编辑
            let data1 = { id: this.row.id, ...data }
            detail = await cupidEdit(data1)
          }
          if (detail.code === 200) {
            this.$message.success(
              this.status === 'add' ? '添加成功!' : '编辑成功'
            )
            this.$emit('update:dialogVisible', false)
            this.$emit('updateTable')
            for (const detailKey in this.ruleForm) {
              this.ruleForm[detailKey] =
                detailKey === 'checkedCities' ? [] : null
            }
            this.$emit('update:status', 'add')
          }
          this.submitLoading = false
        } else {
          this.submitLoading = false

          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        category_id: null, // 分类id
        product_name: null, // 礼物名称
        picture: null, // 图片url
        special: null, // 动效url
        price_info: null, // 天数与价格
        show_type: 1,
        sale_status: 1, // 出售状态：1：上架；0：下架，必须
        checkedCities: []
      }
      this.days_price_arr = [
        { price: undefined, day: undefined, intimacy: undefined }
      ]

      this.extraForm = {
        leftTopImage: '',
        rightTopImage: '',
        leftBottomImage: '',
        rightBottomImage: '',
        isShowBorder: 1,
        chatBubbleBorder: {
          width: '',
          rounded: '',
          direction: 1,
          gradientColor: []
        },
        chatBubbleText: {
          textFont: '',
          rounded: '',
          direction: 1,
          gradientColor: []
        }
      }
      this.borderColors = [{ color: '' }]
      this.contentColors = [{ color: '' }]

      this.radioForm = {
        url: '',
        offsetCenterY: ''
      }

      this.approachForm = {
        color: '',
        offsetCenterY: '',
        url: ''
      }

      this.nicknameForm = {
        shimmerColor: '',
        colors: []
      }
      this.nicknameColors = [{ color: '' }]
    },
    handleSuccess() {
      this.ruleForm.picture = this.ossLastImgUrl
    },
    handleSuccess1() {
      this.ruleForm.special = this.ossLastImgUrl
    },
    addPrice() {
      this.days_price_arr.push({
        day: undefined,
        price: undefined,
        intimacy: undefined
      })
    },
    removePrice(item) {
      let index = this.days_price_arr.indexOf(item)
      if (index !== -1) {
        this.days_price_arr.splice(index, 1)
      }
    },

    /**
     * 添加图片
     */
    handleSuccessLeftTop() {
      this.extraForm.leftTopImage = this.ossLastImgUrl
    },
    handleSuccessRightTop() {
      this.extraForm.rightTopImage = this.ossLastImgUrl
    },
    handleSuccessLeftBottom() {
      this.extraForm.leftBottomImage = this.ossLastImgUrl
    },
    handleSuccessRightBottom() {
      this.extraForm.rightBottomImage = this.ossLastImgUrl
    },
    handleSuccessApproachUrl() {
      this.approachForm.url = this.ossLastImgUrl
    },
    handleRemove(type) {
      switch (type) {
        case 1:
          this.extraForm.leftTopImage = ''
          break
        case 2:
          this.extraForm.rightTopImage = ''
          break
        case 3:
          this.extraForm.leftBottomImage = ''
          break
        case 4:
          this.extraForm.rightBottomImage = ''
          break
        case 5:
          this.approachForm.url = ''
          break
      }
    },

    /**
     * 新增边框颜色
     */
    handleAddBorderColor() {
      this.borderColors.push({ color: '' })
    },
    /**
     * 删除边框颜色
     */
    handleRemoveBorderColor(index) {
      this.borderColors.splice(index, 1)
    },
    /**
     * 新增边框颜色
     */
    handleAddContentColors() {
      this.contentColors.push({ color: '' })
    },
    /**
     * 删除边框颜色
     */
    handleRemoveContentColors(index) {
      this.contentColors.splice(index, 1)
    },

    /**
     * 全服广播
     */
    handleSuccessRadio() {
      this.radioForm.url = this.ossLastImgUrl
    },

    /**
     * 新增昵称颜色
     */
    handleAddNicknameColors() {
      this.nicknameColors.push({ color: '' })
    },
    /**
     * 删除昵称颜色
     */
    handleRemoveNicknameColors(index) {
      this.nicknameColors.splice(index, 1)
    }
  },
  watch: {
    async status(newVal) {
      /* 当 status 为 Edit 则 为编辑框, 需要完成数据的回显   */
      if (newVal === 'edit') {

        this.ruleForm.category_id = this.row.category_id
        this.ruleForm.product_name = this.row.product_name
        this.ruleForm.picture = this.row.picture
        this.days_price_arr = [
          {
            day: this.row.day,
            price: this.row.original_price,
            intimacy: this.row.intimacy
          }
        ]
        this.ruleForm.show_type = this.row.show_type

        this.ruleForm.sale_status = this.row.on_sale === 2 ? 0 : 1
        this.ruleForm.checkedCities = this.row.style_ids

        if (this.cateArr.includes(this.row.category_id)) {
          this.borderColors = JSON.parse(
            this.row.special
          ).chatBubbleBorder.gradientColor
          this.contentColors = JSON.parse(
            this.row.special
          ).chatBubbleText.gradientColor
          this.extraForm = JSON.parse(this.row.special)
        } else if (this.radioArr.includes(this.row.category_id)) {
          this.radioForm = JSON.parse(this.row.special)
        } else if (this.approachArr.includes(this.row.category_id)) {
          this.approachForm = JSON.parse(this.row.special)
        } else if (this.nicknameArr.includes(this.row.category_id)) {
          this.nicknameColors = JSON.parse(this.row.special).colors
          this.nicknameForm = JSON.parse(this.row.special)
        } else {
          this.ruleForm.special = this.row.special
        }
      }
    }
  }
}
</script>

<style scoped>
::v-deep.avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

.avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}

.avatar {
  width   : 100px;
  height  : 100px;
  display : block;
}

::v-deep .lu-input {
  width : 300px !important;
}
</style>
